<template>
	<view class="conent">
		<view class="order_body">
			<view class="order_hader">
				<text>订单编号：1234567890</text>
				<text class="iconfont icon-dianhua rotate" @click="phone"><text
						style="font-size:28rpx;padding-left:10rpx;">致电商家</text></text>
			</view>
			<view class="order_commodity_list">
				<block v-for="(a_item,a_index) in list" :key="a_index">
					<view class="order_list-body">
						<label class="radio" @click="getdetail(a_item,a_index)">
							<radio value="r1" :checked="a_item.select" style="transform:scale(0.7)" />
						</label>
						<image src="../../../static/Mine/6.png"></image>
						<view>
							<text class="goods_name">{{a_item.name}}</text>
							<text class="goods_num">x{{a_item.num}}</text>
						</view>
						<view style="margin-left:50rpx;">
							<price :index="a_index" :value="a_item.value" @variation="variation"></price>
						</view>
					</view>
				</block>
			</view>
			<view class="order_detail">
				<label class="radio">
					<radio value="r1" :checked="checkbox" style="transform:scale(0.7)" @click="checkbox = !checkbox"/>全选
				</label>
				<text>退款金额 <text class="order_prices"> ￥59.90</text></text>
			</view>
		</view>

		<view class="refund_body">
			<view class="cause" @click="swItch = true">
				<text>退款原因</text>
				<text class="iconfont icon-qianjinxiayige"></text>
			</view>
			<textarea placeholder="补充详细退款原因，有利于商家更快的帮您处理" v-model="conent">
			</textarea>
			<upload></upload>
		</view>

		<view class="refund_bottom_body">
			<view>
				<view>退款金额<text class="price">￥23.8</text></view>
				<text class="tips">退款至您的支付账户</text>
			</view>
			<button @click="submit">提交</button>
		</view>

		<screen :swItch="swItch" @Change="Change" :mode="'bottom'" :bottomHeight="680">
			<view class="bw_a">
				<text class="screen_cause">请选择退款原因</text>
				<scroll-view scroll-y="true" :style="{'height': 420 + 'rpx'}" :scroll-top="scrollTop">
					<block v-for="(b_item,b_index) in arrs" :key="b_index">
						<view>
							<text>{{b_item.name}}</text>
							<label class="radio">
								<radio value="r1" checked="true" style="transform:scale(0.7)" />
							</label>
						</view>
					</block>
				</scroll-view>	
				<view class="bottom-button">
					<button @click="swItch = false">关闭</button>
					<button style="background: linear-gradient(135deg, #FF78AE 0%, #FF4891 100%);color:#FFFFFF;" @click="swItch = false">确认</button>
				</view>
			</view>
		</screen>
	</view>
</template>
<script>
	import screen from 'components/bw-screen/bw-screen.vue';
	import upload from 'components/bw-upload/bw-upload.vue';
	import price from 'components/bw-Number/bw-Number.vue';
	import {apply_refund} from '../../../api/mine.js';
	export default {
		components: {
			screen,
			upload,
			price
		},
		data() {
			return {
				swItch: false, //退款原因弹框
				scrollTop:0,
				list: [{
					img: '',
					name: '99枝卡罗拉红玫瑰',
					value: 1,
					num: 1,
					select:false
				}, {
					img: '',
					name: '99枝卡罗拉红玫瑰',
					value: 2,
					num: 2,
					select:true
				}, {
					img: '',
					name: '99枝卡罗拉红玫瑰',
					value: 3,
					num: 3,
					select:false
				}],
				arrs:[
					{
						name:'发货时间问题',
					},{
						name:'不想要了',
					},{
						name:'商品信息填写错误',
					},{
						name:'收货地址填写错误',
					},{
						name:'商品降价',
					},{
						name:'其他原因'
					}
				],
				checkbox:false,
				conent:'',
				req:{
					order_no:'',//订单号
				}
			}
		},
		watch:{
			checkbox(value){
				if(value == true){
					for(var i=0,len = this.list.length; i<len; i++){
						this.list[i].select = true;
					}
				}else{
					for(var i=0,len = this.list.length; i<len; i++){
						this.list[i].select = false;
					}
				}
			}
		},
		methods: {
			Change(e) {
				this.swItch = e
			},
			variation(e) {
				console.log(e);
			},
			getdetail(a_item,a_index){
				a_item.select = !a_item.select;
			},
			phone(){
				uni.makePhoneCall({
				    phoneNumber: '114' //仅为示例
				});
			},
			//申请售后
			async submit(){
				try{
					const res = await apply_refund();
					console.log(res);
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f8f9;
	}
</style>
<style scoped lang="scss">
	@import "../../../iconfont.scss";
	
	.order_body {
		width: 95%;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;

		.order_hader {
			width: 95%;
			padding: 20rpx;
			height: 60rpx;
			margin: 0px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #171E3A;
				font-size: 28rpx;
			}

			.rotate {
				font-size: 40rpx;
			}
		}

		.order_commodity_list {
			width: 100%;
			display: flex;
			padding-left: 10rpx;
			flex-wrap: wrap;

			.order_list-body {
				width: 100%;
				margin: 10rpx auto;
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 95rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}

				view {
					margin-left: 20rpx;

					.goods_name {
						display: block;
						font-weight: 500;
						font-family: PingFangSC-Medium, PingFang SC;
						color: #171E3A;
						font-size: 30rpx;
					}

					.goods_num {
						display: block;
						color: #9A9EA9;
						font-size: 25rpx;
						padding-top: 10rpx;
					}
				}
			}
		}

		.order_detail {
			width: 97%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0px auto;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			margin: 0px auto;

			.order_prices {
				font-weight: bold;
				color: #FD1470;
				font-family: DIN-Bold, DIN;
				font-size: 28rpx;
			}

			text {
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #171E3A;
				font-size: 29rpx;
			}
		}
	}

	.refund_body {
		width: 95%;
		padding-bottom: 150rpx;
		background-color: #FFFFFF;
		margin: 0px auto;

		.cause {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				font-size: 30rpx;
			}
		}

		textarea {
			width: 90%;
			background-color: #F0F1F6;
			padding: 20rpx;
			font-size: 25rpx;
			margin: 0px auto;
			border-radius: 8px;
			// color: #F0F1F6;
			font-weight: 500;
			font-family: PingFang-SC-Medium, PingFang-SC;
		}
	}

	.refund_bottom_body {
		width: 100%;
		padding: 20rpx;
		height: 85rpx;
		padding-left: 30rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		button {
			width: 30%;
			height: 75rpx;
			line-height: 75rpx;
			background: linear-gradient(135deg, #FF78AE 0%, #FF4891 100%);
			font-size: 29rpx;
			color: #FFFFFF;
			border-radius: 50rpx;
			margin-right: 50rpx;
		}

		.price {
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #FD1470;
			font-size: 33rpx;
		}

		view {
			font-size: 25rpx;
		}

		.tips {
			color: #9A9EA9;
			font-size: 22rpx;
			padding-top: 5rpx;
			display: block;
		}
	}
	
	.screen_cause{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #171E3A;
		display: block;
		padding-bottom:15rpx;
		padding-top:20rpx;
	}
	
	.bw_a{
		width:90%;
		height:530rpx;
		margin:0px auto;
		view{
			display: flex;
			justify-content: space-between;
			padding-top:15rpx;
			padding-bottom:15rpx;
			font-size:25rpx;
		}
	}
	
	.bottom-button{
		width:100%;
		//display: flex;
		//justify-content:space-between;
		margin-top:50rpx;
		button{
			width:45%;
			height:75rpx;
			line-height:75rpx;
			border-radius:50rpx;
			font-size:28rpx;
		}
	}
</style>
